<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>生命周期函数</title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			{{msg}}
			<button @click="handleClick">点击销毁</button>
			<child v-if="show">销毁</child>
		</div>
		<script type="text/javascript">
			Vue.config.productionTip = false;

			Vue.component("child", {
				template: `<div>child</div>`,
				mounted() {
					window.onresize = function() {
						console.log("哈哈")
					}
				},
				beforeDestroy() {
					////实例销毁之前调用。在这一步，实例仍然完全可用。
					console.log("beforeDestroy")
				},
				destroyed() { //用于被销毁的组件内部，使用场景如：取消定时器，window事件解绑操作。
					//实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。
					console.log("destroyed")
					window.onresize = null
				}
			})
			const vm = new Vue({
				el: "#app",
				data: {
					msg: "生命周期函数",
					show: true
				},
				methods: {
					handleClick() {
						this.msg = "更新了"
					}
				},
				beforeCreate() {
					console.log("beforeCreate", this.msg)
				},
				created() {
					console.log("created", this.msg)
				},
				beforeMount() {
					console.log("beforeMount", this.msg)
				},
				mounted() {
					console.log("mounted", this.msg)
				},

			})
		</script>
	</body>
</html>
